import React from 'react';

export default class VideoPlayer extends React.Component {
  state = {
  };
  componentDidMount() {
    this.player = window.videojs(this.videoNode);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.source !== this.props.source) {
      this.player.src({ src: nextProps.source, type: "type/vlc"});
      this.player.load(nextProps.source)
    }
    if (nextProps.pause !== this.props.pause) {
      if (this.player !== undefined) {
        if (nextProps.pause === 1) {
          this.player.player_.pause()
        } else {
          this.player.player_.play()
        }
      }
    }
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player && this.player.player_) {
      this.player.player_.dispose()
    }
  }

  render() {
    const { source, styles, ids, ...res } = this.props;
    return (
      <div data-vjs-player style={{width: '100%', height: '100%'}}>
        <video
          ref={ids => this.videoNode = ids}
          // id="my-video"
          className="video-js vjs-default-skin"
          {...res}
          style={{width: '100%', height: '100%'}}
        >
          <source
            src={source}
            type="rtmp/vlc"
          />
        </video>
      </div>
    )
  }
}
